{{ define "js" }}
  <script>
    document.querySelectorAll("code").forEach((code) => {
      try {
        let j = JSON.parse(code.innerHTML)
        code.innerHTML = JSON.stringify(j, null, "\t")
      } catch (err) {
        console.log("error failed to format json:", err)
      }
    })
  </script>

  <script src="/highlight/highlight.min.js"></script>
  <script>
    hljs.highlightAll()
  </script>
{{ end }}
{{ define "css" }}
  <link rel="stylesheet" href="/highlight/styles/base16/dracula.min.css" />
  <style>
    .webhook-table .i-custom:hover {
      border-radius: 50%;
      box-shadow: 0 0 1.5px var(--dark);
    }

    .webhook-table td {
      vertical-align: middle;
    }

    .custom-remove-modal {
      position: relative;
      min-width: 280px;
      padding: 2rem 4rem 3rem;
    }
    .custom-remove-modal-close {
      position: relative;
      top: -1rem;
      right: -2.5rem;
    }
    .custom-remove-modal-close button:hover {
      color: var(--dark);
    }
    .custom-background-color {
      background-color: var(--bg-color);
    }
  </style>
{{ end }}
{{ define "content" }}
  {{ with .Data }}
    <div class="container mt-2">
      {{ if .Flashes }}
        {{ range $i, $flash := .Flashes }}
          <div class="alert {{ if contains $flash "Error" }}alert-danger{{ else }}alert-success{{ end }} alert-dismissible fade show my-3 py-2" role="alert">
            <div class="p-2">{{ $flash | formatHTML }}</div>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
        {{ end }}
      {{ end }}
      <div class="d-md-flex py-2 mb-4 justify-content-md-between">
        <h1 class="h4 mb-1 mb-md-0 d-flex justify-content-center align-items-center">
          <svg class="mr-2" id="icon" viewBox="0 0 32 32" style="width: 1.5rem; height: 1.5rem; fill: var(--font-color);" xmlns="http://www.w3.org/2000/svg">
            <!-- credit https://www.iconfinder.com/carbon-design -->
            <defs>
              <style>
                .webhook-cls-1 {
                  fill: none;
                }
              </style>
            </defs>
            <path d="M24,26a3,3,0,1,0-2.8164-4H13v1a5,5,0,1,1-5-5V16a7,7,0,1,0,6.9287,8h6.2549A2.9914,2.9914,0,0,0,24,26Z" />
            <path d="M24,16a7.024,7.024,0,0,0-2.57.4873l-3.1656-5.5395a3.0469,3.0469,0,1,0-1.7326.9985l4.1189,7.2085.8686-.4976a5.0006,5.0006,0,1,1-1.851,6.8418L17.937,26.501A7.0005,7.0005,0,1,0,24,16Z" />
            <path d="M8.532,20.0537a3.03,3.03,0,1,0,1.7326.9985C11.74,18.47,13.86,14.7607,13.89,14.708l.4976-.8682-.8677-.497a5,5,0,1,1,6.812-1.8438l1.7315,1.002a7.0008,7.0008,0,1,0-10.3462,2.0356c-.457.7427-1.1021,1.8716-2.0737,3.5728Z" />
            <rect class="webhook-cls-1" data-name="&lt;Transparent Rectangle&gt;" id="_Transparent_Rectangle_" />
          </svg>
          Webhooks
        </h1>
        <!-- <nav aria-label="breadcrumb">
                    <ol class="breadcrumb font-size-1 mb-0" style="padding:0; background-color:transparent;">
                        <li class="breadcrumb-item"><a href="/" title="Home">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">
                            Webhooks 
                        </li>
                    </ol>
                </nav> -->
        <button type="button" class="btn btn-outline-primary ml-2" data-toggle="modal" data-target="#add-webhook-modal">Add Webhook</button>
      </div>
      <div class="mb-4">
        <span>Webhooks allow external services to be notified when certain events happen. When the specified events happen, we’ll send a POST request to each of the URLs you provide. Optionally, you can configure the webhook to support discord embeds. Free tier users can add one webhook, with a mobile subscriptions up to two webhooks can be added and with an API subscription a total of five webhooks are supported.</span>
      </div>
      <div class="card">
        <div class="card-body px-0 py-0">
          {{ if len .Webhooks }}
            <div class="table-responsive px-0 py-0">
              <table class="table webhook-table" id="blocks">
                <thead>
                  <tr>
                    <th>URL</th>
                    <th>Retries</th>
                    <th>Last Sent</th>
                    <th style="width: 2rem;"></th>
                    <th style="width: 2rem;"></th>
                    <!-- <th>Destination</th> -->
                  </tr>
                </thead>
                <tbody>
                  {{ range $i, $row := .WebhookRows }}
                    <tr>
                      <td>{{ $row.Url }}</td>
                      <td>
                        {{ $row.Retries }}
                        {{ if ne $row.Retries "0" }}
                          <span class="ml-2 cursor-pointer" id="webhook-retries-{{ $i }}" data-toggle="modal" data-target="#webhook-debug-modal-{{ $row.ID }}">
                            <i class="fas fa-question"></i>
                          </span>
                        {{ end }}
                      </td>
                      <td>{{ $row.LastSent }}</td>
                      <td style="text-align: center;">
                        <i class="fas fa-pen fa-xs text-muted i-custom mx-2" id="edit-webhook-btn" title="Edit webhook" style="padding: .5rem; cursor: pointer;" data-toggle="modal" data-target="#edit-webhook-modal-{{ $row.ID }}"></i>
                      </td>
                      <td style="text-align: center;">
                        <i class="fas fa-times fa-lg mx-2 i-custom" id="remove-webhook-btn" title="Remove webhook" style="padding: .5rem; color: var(--red); cursor: pointer;" data-toggle="modal" data-target="#remove-webhook-modal-{{ $row.ID }}"></i>
                      </td>
                      <!-- <td>{{ $row.Destination }}</td> -->
                    </tr>
                  {{ end }}
                </tbody>
              </table>
            </div>
          {{ else }}
            <div class="p-3">No webhooks registered</div>
          {{ end }}
        </div>
      </div>
      <div class="text-right m-1">
        <span style="font-size: 90%;">{{ .WebhookCount }} / {{ .Allowed }} webhooks registered</span>
      </div>

      {{ template "AddWebhookModal" . }}
      {{ range $i, $row := .WebhookRows }}
        {{ template "ConfirmRemoveModal" $row }}
        {{ template "EditModalWebhook" $row }}
        {{ template "WebhookDebugModal" $row }}
      {{ end }}
    </div>
  {{ end }}
{{ end }}

{{ define "AddWebhookModal" }}
  <div class="modal fade" id="add-webhook-modal" tabindex="-1" role="dialog" aria-labelledby="edit-validator-modal-label" aria-hidden="true">
    <form action="/user/webhooks/add" method="post">
      {{ .CsrfField }}
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Add Webhook</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row justify-content-center">
              <div class="col-11">
                <div class="input-group my-3">
                  <input class="form-control" name="url" type="text" placeholder="https://..." id="webhook_endpoint" required />
                </div>
                {{ range $i, $event := .Events }}
                  <div class="input-group my-3">
                    <div class="form-check form-check-inline w-100">
                      <label for="{{ $event.EventName }}" class="form-check-label mr-auto font-weight-normal">{{ $event.EventLabel }}</label>
                      <input name="{{ $event.EventName }}" class="form-check-input checkbox-custom-size ml-2 mr-0" type="checkbox" id="{{ $event.EventName }}" />
                    </div>
                  </div>
                {{ end }}
                <hr class="my-3" />
                <div class="input-group my-3">
                  <div class="form-check form-check-inline w-100">
                    <label for="discord-checkbox" class="form-check-label mr-auto font-weight-normal">Discord</label>
                    <input name="discord" class="form-check-input checkbox-custom-size ml-2 mr-0" type="checkbox" id="discord-checkbox" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <!-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> -->
            <button type="submit" class="btn btn-outline-primary">Add Webhook</button>
          </div>
        </div>
      </div>
    </form>
  </div>
{{ end }}

{{ define "EditModalWebhook" }}
  <div class="modal fade" id="edit-webhook-modal-{{ .ID }}" tabindex="-1" role="dialog" aria-labelledby="edit-validator-modal-label" aria-hidden="true">
    <form action="/user/webhooks/{{ .ID }}/update" method="post">
      {{ .CsrfField }}
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Edit Webhook</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row justify-content-center">
              <div class="col-11">
                <div class="input-group my-3">
                  <input class="form-control" name="url" type="text" value="{{ .UrlFull }}" id="webhook_endpoint" />
                </div>
                {{ range $i, $event := .Events }}
                  <div class="input-group my-3">
                    <div class="form-check form-check-inline w-100">
                      <label for="{{ $.ID }}-{{ $event.EventName }}" class="form-check-label mr-auto font-weight-normal">{{ $event.EventLabel }}</label>
                      <input {{ if $event.Active }}checked{{ end }} name="{{ $event.EventName }}" class="form-check-input checkbox-custom-size ml-2 mr-0" type="checkbox" id="{{ $.ID }}-{{ $event.EventName }}" />
                    </div>
                  </div>
                {{ end }}
                <hr class="my-3" />
                <div class="input-group my-3">
                  <div class="form-check form-check-inline w-100">
                    <label for="discord-checkbox-{{ .ID }}" class="form-check-label mr-auto font-weight-normal">Discord</label>
                    <input {{ if .Discord }}checked{{ end }} name="discord" class="form-check-input checkbox-custom-size ml-2 mr-0" type="checkbox" id="discord-checkbox-{{ .ID }}" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-outline-primary">Update Webhook</button>
          </div>
        </div>
      </div>
    </form>
  </div>
{{ end }}

{{ define "ConfirmRemoveModal" }}
  <div class="modal fade" id="remove-webhook-modal-{{ .ID }}" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content custom-background-color custom-remove-modal row mx-0">
        <div class="mb-4 custom-remove-modal-close">
          <button class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="w-100 mb-2 heading-l2 text-center">Confirm Removal</div>
        <div class="col-12 d-flex align-items-center mb-5 px-0 h6">
          <span class="text-left font-weight-normal" id="modaltext"></span>
        </div>
        <form id="form-delete-webhook-{{ .ID }}" action="/user/webhooks/{{ .ID }}/delete" method="post">
          {{ .CsrfField }}
          <div class="col-12 d-flex align-items-center justify-content-between px-0">
            <button class="btn btn-dark btn-sm w-50 mr-2 mr-sm-3 text-white" data-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-primary btn-danger btn-sm w-50 ml-sm-3 text-white">Remove</button>
          </div>
        </form>
      </div>
    </div>
  </div>
{{ end }}

{{ define "WebhookDebugModal" }}
  <div class="modal fade" id="webhook-debug-modal-{{ .ID }}" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 80% !important">
      <div class="modal-content custom-background-color custom-remove-modal row mx-0">
        <div class="mb-4 custom-remove-modal-close">
          <button class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="w-100 mb-2 heading-l2 text-center h4">Most recent webhook request</div>
        <!-- <div class="col-12 d-flex align-items-center mb-3 px-0 h6 h5">
                <span class="text-left font-weight-normal my-2" id="modaltext">
                    View information about the most recent webhook request to see why it was not delivered.
                </span>
            </div> -->
        <div class="w-100 my-3">
          <details class="my-3">
            <summary class="h5" id="detail-modal-{{ .ID }}-request-summary">
              {{ .WebhookError.SummaryRequest }}
            </summary>
            <p id="detail-modal-{{ .ID }}-request-content">
              {{ .WebhookError.ContentRequest }}
            </p>
          </details>
          <details open class="my-3">
            <summary class="h5" id="detail-modal-{{ .ID }}-response-summary">
              {{ .WebhookError.SummaryResponse }}
            </summary>
            <p id="detail-modal-{{ .ID }}-response-content">
              {{ .WebhookError.ContentResponse }}
            </p>
          </details>
        </div>
      </div>
    </div>
  </div>
{{ end }}
